<template>
  <!-- 区域价格管理 -->
  <div>
    <div class="app-page">
      <org-tree
        class="orgTree"
        title="组织机构"
        :tree-data="treeData01"
        :mouse-button="false"
        :loading="$loadingPlugin.getTreeData"
        @currentChange="currentChange01"
      />
      <div class="content">
        <div>
          <el-table-form ref="form" class="merge-item">
            <el-form-item label="统计日期" :table-form-merge="2">
              <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="query.onlyBeyond" @change="checkboxChange">只看超出预警金额的机构</el-checkbox>
            </el-form-item>
            <template v-slot:btns>
              <el-button
                v-permission="1"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >查询</el-button>
            </template>
          </el-table-form>
        </div>
        <div style="margin-bottom: 10px;" class="btn-group">
          <el-button
            v-permission="2"
            type="primary"
            icon="el-icon-download"
            @click="exportFile"
          >导出</el-button>
        </div>
        <lb-table
          ref="lbTable"
          v-el-height-adaptive-table="{ bottomOffset: 10 }"
          class="table"
          border
          highlight-current-row
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          pagination
          :total="tableData.total"
          :immediate-fetch="false"
          custom-column
          @fetch="fetchData"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { formatFixed2, parseTime } from '@/utils'
  import { handIndayWarnList, handIndayWarnListExport } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import moment from 'dayjs'
  import OrgTree from '@/views/components/OrgTree'
  import { mapGetters } from 'vuex'

  export default {
    name: 'handIndayWarn',
    components: {
      OrgTree
    },
    data() {
      return {
        treeData01: [],
        currentOrg: null,
        date: [moment().startOf('month'), moment()],
        query: {
          orgSNNo: '',
          onlyBeyond: true
        },
        searchParams: {},
        tableData: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              label: '日期',
              prop: 'date',
              width: 100,
              render: (h, { row }) => <span>{row.date && parseTime(row.date, '{y}-{m}-{d}')}</span>
            },
            { label: '机构', prop: 'orgName', width: 150 },
            { label: '上日结存', prop: 'yesterdayCarry', width: 100, align: 'right', formatter: row => formatFixed2(row.yesterdayCarry) },
            { label: '本日收入', prop: 'todayIncome', align: 'right', formatter: row => formatFixed2(row.todayIncome) },
            { label: '本日支出', prop: 'todayExpenses', align: 'right', formatter: row => formatFixed2(row.todayExpenses) },
            { label: '本日结存', prop: 'todayCarry', align: 'right', formatter: row => formatFixed2(row.todayCarry) },
            { label: '结存预警金额', prop: 'warning', align: 'right', formatter: row => formatFixed2(row.warning) },
            { label: '超出预警金额', prop: 'beyond', align: 'right', formatter: row => formatFixed2(row.beyond) }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters(['orgList', 'exportDomain'])
    },
    created() {
      this.getTreeData01()
    },
    methods: {
      async fetchData({ currentPage, pageSize }) {
        const query = {
          ...this._getQuery(this.query),
          currentPage,
          pageSize
        }
        if (this.date && this.date.length > 0) {
          query.startTime = this.date[0]
          query.endTime = this.date[1]
        }
        this.searchParams = query
        const res = await handIndayWarnList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      checkboxChange(value) {
        this.query.onlyBeyond = value
        this.$refs.lbTable.fetch()
      },
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 获取组织机构数据
      async getTreeData01() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData01 = getTreeData(data)
      },
      // 选择组织机构变化
      currentChange01(current) {
        this.query.orgSNNo = current.orgSNNo
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      exportFile() {
        const _this = this
        this.$confirm(`确定导出数据？`, '提示', {
          type: 'warning'
        }).then(() => {
          const copyColumn = JSON.parse(JSON.stringify(this.tableData.column))
          copyColumn.pop()
          const str = {}
          copyColumn.forEach(item => {
            str[item.prop] = item.label
          })
          handIndayWarnListExport({
            paramInfo: _this._getQuery(_this.searchParams),
            kv: str // 表格列
          }).then((res) => {
            window.open(`${this.exportDomain}/page/export/frame?key=${res.data}`, '_blank')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .orgTree {
    height: 820px;
  }
  .content {
    width: 0;
    padding: 0 10px 0 10px;
    flex: 1;
  }
  .form {
    margin-left: 10px;
  }
}

/deep/.el-select__tags {
  overflow: hidden;
  span {
    display: flex;
  }
}
//.aside.open {
//  width: 200px;
//  font-size: 0.8rem;
//}
</style>
